//.van-nav-bar{
//    background-color: transparent !important;
//
//    .back{
//        height: 42rpx;
//    }
//}

.page{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

    .top{
        position: relative;

        .background{
            width: 100%;
            height: 300rpx;
        }

        .avatar{
            position: absolute;
            top: 230rpx;
            left: 20rpx;
            width: 128rpx;
            height: 128rpx;
            border: white 8rpx solid;
            border-radius: 50%;
        }

        .user-info{
            display: flex;
            flex-direction: column;

            .btn{
                display: flex;
                flex-direction: row;
                justify-content: flex-end;

                .btn-send{
                    margin-left: 20rpx;
                    margin-right: 40rpx;
                }

                .btn-follow{
                    margin-right: 40rpx;
                }
            }

            .name-grade{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-left: 30rpx;

                .name{
                    font-weight: bold;
                    font-size: 42rpx;
                    margin-right: 16rpx;
                    margin-bottom: 12rpx;
                }

                .grade{
                    height: 40rpx;
                }
            }

            .concern-fan-activity{
                display: flex;
                flex-direction: row;

                .concern{
                    display: flex;
                    align-items: center;
                }

                .fan{
                    display: flex;
                    align-items: center;
                }

                .activity{
                    display: flex;
                    align-items: center;
                }

                .value{
                    color: #1577FF;
                    font-weight: bold;
                    margin-left: 30rpx;
                }

                .label{
                    margin-left: 6rpx;
                    color: #999999;
                    font-size: small;
                }
            }
        }

        .separate{
            margin-top: 15rpx;
            background-color: #F9F9F9;
            height: 6rpx;
        }

        .tabs{
            .tab{
                color: #999999;
                font-size: 30rpx;
                font-weight: bold !important;
            }
        }
    }

    //.list-item{
    //    display: flex;
    //    flex-direction: row;
    //    justify-content: flex-start;
    //    margin: 25rpx 30rpx;
    //
    //    .date{
    //        font-weight: bold;
    //    }
    //
    //    .pics{
    //        display: flex;
    //        flex-direction: column;
    //
    //        .part-pic{
    //            margin-left: 50rpx;
    //            display: flex;
    //            flex-direction: row;
    //
    //            .picture{
    //                margin-right: 6rpx;
    //                margin-bottom: 6rpx;
    //                width: 100rpx;
    //                height: 100rpx;
    //            }
    //        }
    //    }
    //
    //
    //    .description-imagNum{
    //        display:flex;
    //        flex-direction: column;
    //        flex-wrap: wrap;
    //        margin-left: 10rpx;
    //
    //        .description{
    //            flex: 1;
    //            font-weight: bold;
    //        }
    //
    //        .imagNum{
    //            font-size: small;
    //            color: #656667;
    //        }
    //    }
    //}
}
